<!DOCTYPE html>
<html>
<head>
    <title>菜单管理</title>
    #parse("sys/header.html")
    <style>
        body {
            padding: 10px;
        }
        #gen-page{
            display: none;
        }
        .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control{
            background: none;
        }
    </style>
</head>
<body>
<div id="toolbar">
    <div class="btn-group" role="group" aria-label="...">
        <button type="button" @click="allExport" class="btn btn-default waves-effect">导出所有</button>
        <button type="button" @click="activatedExport" class="btn btn-default waves-effect">导出已激活</button>
        <button type="button" @click="unactivateExport" class="btn btn-default waves-effect">导出未激活</button>
        <button type="button" @click="invalidExport" class="btn btn-default waves-effect">导出已过期</button>
        <!--<button type="button" class="btn btn-default">按条件导出</button>-->
        <button type="button" @click="selectExport" class="btn btn-default waves-effect">勾选导出</button>
        <button type="button" @click="gen" class="btn btn-default waves-effect">生成</button>
    </div>
</div>

<div id="gen-page">
    <form class="form-horizontal">
        <div class="form-group">
            <label  class="col-sm-2 control-label">生效日期</label>
            <div class="col-sm-10">
                <input class="form-control takeEffectTime" placeholder="点击输入">
            </div>
        </div>
        <div class="form-group">
            <label  class="col-sm-2 control-label">失效日期</label>
            <div class="col-sm-10">
                <input class="form-control loseEfficacyTime" placeholder="点击输入">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">期限(单位:小时)</label>
            <div class="col-sm-10">
                <input type="number" min="1" class="form-control timeLimit" value="8760" placeholder="">
            </div>
        </div><div class="form-group">
            <label class="col-sm-2 control-label">单价(单位:元)</label>
            <div class="col-sm-10">
                <input type="number" min="1" class="form-control price" value="10" placeholder="">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">数量</label>
            <div class="col-sm-10">
                <input type="number" min="1" class="form-control num" value="100" placeholder="">
            </div>
        </div>
    </form>

</div>

<table id="table"/>
<script>
    $(function () {
        Waves.init();


        var table = $("#table");
        table.bootstrapTable({
            url: "/sys/activationCode/page",//请求数据url
//        queryParams: function (params) {
//            var search = tool.data("#search-form")
//            return $.extend(search, params);
//        },
            idField: "id",
            showHeader: true,
            showColumns: false,
            striped: true,
            showRefresh: false,
            pagination: true,//分页
            sidePagination: 'server',//服务器端分页
            toolbar: "#toolbar",
            pageNumber: 1,
            paginationLoop: false,
            smartDisplay: false,
            method: "post",
            ajaxOptions: {
                contentType: "application/json; charset=utf-8"
            },
            pageList: [5, 10, 20, 50],//分页步进值
            search: false,//显示搜索框
            clickToSelect: "true",
            paginationPreText: "上一页",
            paginationNextText: "下一页",
            selectItemName: "id",
//        onRefresh: function () {
//            table.bootstrapTable("hideLoading");
//            /*if(!table.hasClass('glass')){
//             table.addClass('glass');
//             } */
//            layer.load(2);
//        },
//        onPageChange: function () {
//            table.bootstrapTable("hideLoading");
//            /* if(!table.hasClass('glass')){
//             table.addClass('glass');
//             } */
//            layer.load(2)
//        },
//        onLoadSuccess: function () {
//            //setTimeout(function(){table.removeClass('glass');},500);
//            layer.closeAll();
//        },
//        onLoadError: function () {
//            layer.closeAll();
//            //setTimeout(function(){table.removeClass('glass');},500);
//        },
            paginationDetailHAlign: 'right',
            silent: true, //刷新事件必须设置
            formatLoadingMessage: function () {
                return "请稍等，正在加载中...";
            },
            formatNoMatches: function () { //没有匹配的结果
                return '无符合条件的记录';
            },
            columns: [
                {
                    checkbox: true
                }, {
                    field: 'sequence',
                    title: '序列号'
                }, {
                    field: 'code',
                    title: '激活码'
//                }, {
//                    field: 'batchCode',
//                    title: '批次'
                }, {
                    field: 'timeLimit',
                    title: '使用期限',
                    formatter: function (value, row, index) {
                        return value + " 小时";
                    }
                }, {
                    field: 'takeEffectTime',
                    title: '生效日期',
                    formatter: function (value, row, index) {
//                        new Date(value).format("yyyy-MM-dd hh:mm:ss")
                        return new Date(value).format("yyyy-MM-dd hh:mm");
                    }
                }, {
                    field: 'loseEfficacyTime',
                    title: '失效日期',
                    formatter: function (value, row, index) {
                        return new Date(value).format("yyyy-MM-dd hh:mm");
                    }
                }, {
                    field: 'activeTime',
                    title: '激活时间',
                    formatter: function (value, row, index) {
                        if (value)
                            return new Date(value).format("yyyy-MM-dd hh:mm");
                        else {
                            return ""
                        }
                    }
                }, {
                    field: 'state',
                    title: '状态',
                    formatter: function (value, row, index) {
                        switch (value){
                            case 0:
                                return "未激活";
                            case 1:
                                return "已激活";
                            case 2:
                                return "已过期";
                        }
                    }
                }, {
                    field: 'operate',
                    title: '操作',
                    width: "200px",
                    clickToSelect: false,
                    events: {
                        'click .edit': function (e, value, row, index) {
                        },
                        'click .delete': function (e, value, row, index) {
                        }
                    },
                    formatter: function (value, row, index) {

                    }
                }]
        });




        var vm = new Vue({
            el: "#toolbar",
            data: {},
            methods: {
                selectExport: function () {
                    var selects = table.bootstrapTable("getSelections");
                    if (selects.length === 0) {
                        bootbox.alert({
                            message: "请选择需要导出的数据",
                            size: "small"
                        });
                        return;
                    }
                    var ids = _.map(selects, function (e) {
                        return e.id
                    });
                    ids = _.reduce(ids, function (e1, e2) {
                        return e1 + "," + e2;
                    });
                    window.open("/sys/activationCode/selectExport?ids=" + ids);
                },
                allExport: function () {
                    window.open("/sys/activationCode/allExport");
                },
                activatedExport: function () {
                    window.open("/sys/activationCode/activatedExport");
                },
                unactivateExport: function () {
                    window.open("/sys/activationCode/unactivateExport");
                },
                invalidExport: function () {
                    window.open("/sys/activationCode/invalidExport");
                },
                gen: function () {
                    var obj = {};
                    obj.dialog = bootbox.dialog({
                        title: '生成配置',
                        message: $("#gen-page").html(),
                        buttons: {
                            cancel: {
                                label: "取消",
                                className: 'btn-danger waves-effect',
                                callback: function(){
                                    console.log(arguments)
                                }
                            },
                            ok: {
                                label: "生成",
                                className: 'btn-info waves-effect',
                                callback: function(){
                                    $.get("/sys/activationCode/gen", {
                                        takeEffectTime:obj.takeEffectTime.selectedDates[0].getTime(),
                                        loseEfficacyTime:obj.loseEfficacyTime.selectedDates[0].getTime(),
                                        timeLimit:obj.dialog.find(".timeLimit").val(),
                                        num:obj.dialog.find(".num").val(),
                                        price:obj.dialog.find(".price").val()
                                    },function (result) {
                                        if (result.success) {
                                            table.bootstrapTable("refresh");
                                            bootbox.confirm({
                                                message: "生成成功是否导出?",
                                                buttons: {
                                                    confirm: {
                                                        label: '是',
                                                        className: 'btn-success waves-effect'
                                                    },
                                                    cancel: {
                                                        label: '否',
                                                        className: 'btn-danger waves-effect'
                                                    }
                                                },
                                                callback: function (r) {
                                                    if (r) {
                                                        window.open("/sys/activationCode/batchCodeExport?batchCode=" + result.result)
                                                    }

                                                }
                                            });
                                        } else {
                                            bootbox.alert({
                                                message: result.msg,
                                                size: "small"
                                            })
                                        }
                                    }, "json")


                                }
                            }
                        }
                    });

                    obj.takeEffectTime = $(".modal-dialog .takeEffectTime").flatpickr({
                    });

                    obj.loseEfficacyTime = $(".modal-dialog .loseEfficacyTime").flatpickr({
                    });


                }
            }
        });
    })
</script>
</body>
</html>
